<!--
 @description 物流Tab内容页
 @fileName TabPage.vue
 @author zengqiongying
 @created 2021/06/26 16:39:24
-->
<template>
  <div class="main-page">
    <div class="wrapper">
      <div
        class="main-title"
        @click.stop="openIntro('logistics', '6month')"
      >
        <div style="flex:1;display:flex;align-items: center;">
          物流{{ tabTitle }}近6月趋势(车)
          <img
            class="icon_inst"
            src="@/assets/image/icon_instructions.png"
          >
        </div>
        <div class="ft12 color-99 fw-normal">
          本年总{{ tabTitle }}：<span class="color-red">{{
            yearTotal | filterForamtThousand
          }}</span>车
        </div>
        <!-- <div class="chart-dot">
              <div class="dot green">今年</div>
              <div class="dot yellow">去年</div>
            </div> -->
      </div>
      <ship-six-month-chart v-if="tabName === 'ship'" />
      <car-six-month-chart v-else />
    </div>
    <div class="wrapper">
      <div
        class="main-title"
        @click.stop="openIntro('logistics', 'monthmap')"
      >
        当月办事处{{ tabTitle }}分布图
        <img
          class="icon_inst"
          src="@/assets/image/icon_instructions.png"
        >
      </div>
      <map-chart :select-type="tabName" />
    </div>
    <div v-if="tabName === 'car'" class="wrapper">
      <div class="main-title">
        线路运价比率分析（车）
      </div>
      <line-chart
        :x-axis-data="freightRateXAxisData"
        :series-data="freightRateSeriesData"
        :percentage="true"
      />
    </div>
    <div class="wrapper">
      <div class="main-title">
        <!-- @click.stop="openIntro('logistics', 'detail')" -->
        各办/部门{{ tabTitle === "配车" ? "配车未请" : "请车未发" }}明细
        <!-- <img
                    class="icon_inst"
                    src="@/assets/image/icon_instructions.png"
                /> -->
      </div>
      <detail-data-table :select-type="tabName" />
    </div>
  </div>
</template>

<script>
import ShipSixMonthChart from '@/components/logistics/ShipSixMonthChart'
import CarSixMonthChart from '@/components/logistics/CarSixMonthChart'
import MapChart from '@/components/logistics/MapChart'
import DetailDataTable from '@/components/logistics/DetailDataTable'
import { parseTime } from '@/utils'
import {
  getLogisticsYearCareQuantity,
  getLogisticsYearShipQuantity,
  findFreightRateRatio
} from '@/apis/logistics'
import LineChart from '@/views/delivery/components/LineChart'
export default {
  name: 'LogisticsTabPage',
  components: {
    ShipSixMonthChart,
    CarSixMonthChart,
    MapChart,
    DetailDataTable,
    LineChart
  },
  props: {
    coreDate: {
      type: String,
      default: parseTime(new Date(), '{y}-{m}-{d}')
    },
    tabName: {
      type: String,
      default: 'car'
    }
  },
  data() {
    return {
      yearTotal: 0, // 年度总数
      carTotal: 0, // 年度配车总数
      freightRateXAxisData: null,
      freightRateSeriesData: [
        { name: '专线', field: 'specialRate' },
        { name: '普线', field: 'generalRate' },
        { name: '总线', field: 'totalRate' }
      ]
    }
  },
  computed: {
    tabTitle() {
      return this.tabName === 'ship' ? '启运' : '配车'
    }
  },
  watch: {
    tabName(val, oldVal) {
      this.getLogisticsTotal()
    }
  },
  created() {
    this.getLogisticsTotal()
    this.findFreightRateRatio()
  },
  methods: {
    // 获取年度总量
    getLogisticsTotal() {
      const fetchFn =
                this.tabName === 'ship'
                  ? getLogisticsYearShipQuantity
                  : getLogisticsYearCareQuantity
      fetchFn().then((res) => {
        this.yearTotal = res.data || '-'
      })
    },
    openIntro(code, type) {
      this.openInstrusction(code, `${this.tabName}_${type}`)
    },
    // 获取-线路运价比率分析(车)
    findFreightRateRatio() {
      findFreightRateRatio()
        .then((res) => {
          // 线路运价比率分析
          if (res.data) {
            const {
              xAxisData,
              seriesData
            } = this.resetLineChartData(
              res.data,
              this.freightRateSeriesData,
              'dataDay'
            )
            this.freightRateXAxisData = xAxisData
            this.freightRateSeriesData = seriesData
          }
        })
        .catch(() => {
          this.$toast.fail('系统异常')
        })
    },
    // 图表数据处理(list: 未处理前的图表数据；seriesData：图列名称与对应字段；xAxisField：x轴对应字段  )
    resetLineChartData(list, seriesData, xAxisField) {
      seriesData.forEach((item) => {
        item.data = []
      })
      let copyLsit = JSON.parse(JSON.stringify(list))
      const copySeriesData = JSON.parse(JSON.stringify(seriesData))
      const xAxisData = []
      if (xAxisField === 'day') {
        // 根据日期排序
        copyLsit = copyLsit.sort((a, b) => {
          return (
            Number(a.day.replace(/-/g, '')) -
                        Number(b.day.replace(/-/g, ''))
          )
        })
      }
      copyLsit.forEach((item) => {
        xAxisData.push(item[xAxisField])
        copySeriesData.forEach((row) => {
          row.data.push(item[row.field])
          // row.data.push(Math.floor(item[row.field] * 100) / 100);
        })
      })
      return {
        xAxisData,
        seriesData: copySeriesData
      }
    }
  }
}
</script>
<style lang="scss" scoped></style>
